<script lang="ts" setup>
  import Chart, { ECOption } from '@/components/echarts'

  interface DataItem {
    name: string
    value: number
  }

  defineOptions({
    name: 'ClassSalePieChart',
  })

  const mockData: DataItem[] = [
    {
      name: '粉面粥店',
      value: 430,
    },
    {
      name: '烧烤',
      value: 543,
    },
    {
      name: '汉堡披萨',
      value: 233,
    },
    {
      name: '水果',
      value: 213,
    },
    {
      name: '便当',
      value: 244,
    },
  ]

  const colors = [
    'rgb(92,123,217)',
    'rgb(159,224,128)',
    'rgb(250,200,88)',
    'rgb(238,102,102)',
    'rgb(155,192,222)',
  ]

  const option: ECOption = {
    /*  grid: {
      top: 30,
      left: 30,
      right: 30,
      bottom: 30,
    }, */
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left: '74%',
      top: 'middle',
      textStyle: {
        color: '#8a8a8a',
      },
    },
    tooltip: {
      trigger: 'item',
      formatter(params: any) {
        return `
          ${params.seriesName} </br>
          ${params.marker} ${params.name}</br>
          数量：${params.value} </br>
          占比：${params.percent}% </br>
        `
      },
    },
    title: [
      {
        text: '品类分布',
        textStyle: {
          fontSize: 14,
          color: '#666',
        },
        left: 20,
        top: 20,
      },
      {
        text: '累计订单量',
        textStyle: {
          fontSize: 14,
          color: '#999',
        },
        subtextStyle: {
          fontSize: 28,
          color: '#333',
        },
        subtext: '320',
        left: '39%',
        top: '42.5%',
        textAlign: 'center',
      },
    ],
    series: [
      {
        type: 'pie',
        name: '品类分布',
        data: mockData.map((item, index) => ({
          ...item,
          itemStyle: {
            color: colors[index],
          },
          textStyle: {
            color: colors[index],
          },
        })),
        center: ['40%', '50%'],
        radius: ['40%', '55%'],
        label: {
          show: true,
          position: 'outer',
          formatter(params) {
            const data = params.data as DataItem
            // return `${data.name} | ${data.percent}`
            return data.name
          },
        },
        labelLine: {
          length: 5,
          length2: 3,
          smooth: true,
        },
        // 顺时针排列
        clockwise: true,
      },
    ],
  }
</script>

<template>
  <Chart style="width: 100%; height: 100%" :option="option" />
</template>
<style lang="less" scoped></style>
